"use client";
import React, {useEffect} from "react";
import {DataTable, useDataTableColumns} from "mantine-datatable";
import {RecordProps, RecordsRequestProps, RecordsResponseProps} from "./interface";
import {useIpdTableContext} from "./context";
import {renderColumns} from "./renderColumns";
import {fetchRecords} from "./utils";

export function Table() {
  // 从context中获取相关变量
  const {
    PAGE_SIZES,
    page,
    pageSize,
    fetching,
    records,
    selectedRecords,
    totalRecords,
    setPage,
    setPageSize,
    setFetching,
    setRecords,
    setSelectedRecords,
    setTotalRecords,
  } = useIpdTableContext();

  // 列宽可调功能（组件内部使用，无需context统一纳管）
  const key = "relay-simulation-plan-list";
  const {effectiveColumns} = useDataTableColumns<RecordProps>({
    key,
    columns: renderColumns,
  });

  // 监听每页行数变化，一旦有变，设置页码为1
  useEffect(() => {
    setPage(1);
  }, [pageSize, setPage]);

  // 监听页码变化、每页行数变化，一旦有变，重新获取数据
  useEffect(() => {
    const request: RecordsRequestProps = {
      page,
      pageSize,
    };
    const loadData = async () => {
      setFetching(true);
      const data = (await fetchRecords("/api/simuPlan", request)) as RecordsResponseProps;

      setRecords(data.records);
      setTotalRecords(data.totalRecords);
      setFetching(false);
    };
    loadData();
  }, [page, pageSize, setFetching, setRecords, setTotalRecords]);

  return (
    <DataTable
      // [1]样式配置
      striped // 斑马纹
      withTableBorder // 表格外边框
      withColumnBorders // 列边框（行边框是默认的，因此无需配置）
      highlightOnHover // 悬停高亮
      borderRadius="sm" // 表格边框圆角大小
      style={{whiteSpace: "nowrap"}} // 批量设置表格内容：永不换行
      // pinFirstColumn // 固定第一列
      pinLastColumn // 固定最后一列
      defaultColumnProps={{textAlign: "center", noWrap: true}} // 统一修改为居中对齐（默认左对齐）
      // [2]数据渲染
      records={records}
      accessKey="id" // 默认锚定records中的id，若数据结构没有id，则需锚定到对应属性
      storeColumnsKey={key} // 表格列宽可调必须配置此属性
      columns={effectiveColumns} // 表格列宽可调必须配置此属性，无需可调，在这里直接等于{renderColumns}就行
      // [3]分页功能（自带属性接口）
      totalRecords={totalRecords} // 表格总行数，是paginationText的先决条件，必须配置
      paginationText={({from, to, totalRecords}) => `${from} - ${to} / ${totalRecords}`} // 标准格式
      recordsPerPage={pageSize} // 每页行数(附注：此组件根据总行数，每页行数自动计算页数，无需从后端获取页数)
      recordsPerPageLabel="每页行数" // 每页行数文字展示
      recordsPerPageOptions={PAGE_SIZES} // 每页行数可选范围
      page={page} // 当前页码
      onPageChange={(p) => setPage(p)}
      onRecordsPerPageChange={setPageSize}
      // [4]易用性：表格空白
      loadingText="加载中..." // 加载文字[可重写]
      minHeight={300} // 最小行高（ipdv2要求：行数固定为5时，最小行高为250）
      noRecordsText="无结果" // 无结果[可重写]
      // [5]易用性：数据加载状态
      fetching={fetching} // 加载状态
      loaderBackgroundBlur={4} // 加载时背景模糊程度
      // [6]易用性：多选
      selectedRecords={selectedRecords}
      onSelectedRecordsChange={setSelectedRecords}
    />
  );
}
